<template>
  <div class="progress-flex">
    <div class="nowrap">
      {{ getAchievementRate?.info[0]?.targetType || '' }}
    </div>
    <div class="progress-bar" :style="{ background: progressColor }">
      <div class="progress">
        <div class="thumb" :style="{ left: thumbPosition }" />
      </div>
    </div>
    <div class="percentage">{{ progressPercentage }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useFinanceStore } from '@/stores/module/finance'
const FinanceStore = useFinanceStore() // 创建store实例
const { getAchievementRate } = storeToRefs(FinanceStore)

// const progressWidth = ref('')
const progressPercentage = ref('')
const thumbPosition = ref('')
const progressColor = ref(null)

watch(
  progressPercentage,
  (value) => {
    progressColor.value = `linear-gradient(90deg, rgba(121, 249, 247, ${value}), rgba(121, 249, 247, ${value}), rgba(121, 249, 247, ${value}))`
    // thumbPosition.value = `${value}`
  },
  { immediate: true }
)
watch(
  () => getAchievementRate.value,
  (value) => {
    thumbPosition.value = `${Math.max(
      0,
      Math.min(getAchievementRate.value.info[0]?.completedRate || 0, 100)
    )}%`

    progressPercentage.value = `${
      getAchievementRate.value.info[0]?.completedRate
        ? Math.max(
            getAchievementRate.value.info[0]?.completedRate,
            Math.min(getAchievementRate.value.info[0]?.completedRate || 0, 1)
          )
        : 0
    }%`
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.progress-flex {
  display: flex;
  width: 100%;
  align-items: center;
  font-size: 20px;
  margin-top: 10px;
}
.nowrap {
  white-space: nowrap;
  margin-right: 20px;
}
.progress-bar {
  position: relative;
  width: 100%;
  height: 6px;
  min-width: 300px;
}

.progress {
  position: absolute;
  height: 100%;
  width: 100%;
  height: 5px;
  background: linear-gradient(
    90deg,
    rgba(121, 249, 247, 0.9),
    rgba(121, 249, 247, 0.5),
    rgba(127, 251, 243, 0)
  );

  transition: width 0.2s ease-out;
}

.thumb {
  position: absolute;
  width: 10px;
  height: 6px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 88%),
    rgba(121, 249, 247, 88%)
  );
  box-shadow: 0 0 10px 6px rgba(121, 249, 247, 0.9);
  border-radius: 2px;
  margin-left: -1px;
}

.percentage {
  font-weight: bold;
  margin-left: 20px;
  color: #ffffff;
}
</style>
